<template>
  <div class="welcome">
    <el-row :gutter='20'>
      <el-col :span="24">
        <el-card class="personalWork">
          <div class="cardHeader">
            <i class="el-icon-user-solid"></i>
            <span>工作台</span>
          </div>
          <div class="workbench">
            <div class="personInfo">
              <el-avatar icon="el-icon-user-solid" :size="60" :src="avaterUrl"></el-avatar>
              <div class="personText">
                  <div class="textMon">
                    <span>{{dateNode}}，起风了，青春只有一次，别让自己过得不精彩</span>
                  </div>
                  <div class="textWea">
                      <i class="el-icon-umbrella"></i>
                      <span>今天小雨，出门记得带伞哦</span>
                  </div>
              </div>
            </div>
            <div class="workData">
              <div class="Data-item">
                <div class="dataTitle">项目数</div>
                <div class="dataContent">12</div>
              </div>
              <div class="Data-item">
                <div class="dataTitle">待办项</div>
                <div class="dataContent">3/20</div>
              </div>
              <div class="Data-item">
                <div class="dataTitle">当前日期</div>
                <div class="dataContent">{{ currentDate }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card>
          <div class="cardHeader">
            <i class="el-icon-message-solid"></i>
            <span>动态信息</span>
          </div>
          <div class="dynamicList" v-for="(item,index) in dynamicList" :key="index">
              <el-avatar icon="el-icon-user-solid" size="medium" :src="item.avater"></el-avatar>
              <div class="dynamicInfo">
                <span class="dynamicContent">{{item.content}}</span>
                <span class="dynamicTime">{{item.time}}</span>
              </div>
            </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card>
          <div class="cardHeader">
            <i class="el-icon-s-order"></i>
            <span>待办事项</span>
          </div>
          <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="content"
                label="目标">
              </el-table-column>
              <el-table-column
                label="进度"
                width="200">
                <template #default="{ row }">
                  <el-progress :percentage="row.progress" :color="row.color"></el-progress>
                </template>
              </el-table-column>
              <el-table-column
                prop="time"
                label="完成时间"
                width="180"
              >
              </el-table-column>
            </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const date = new Date()
export default {
  mounted() {
    this.getDateNode()
  },
  data() {
    return {
      currentDate: date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(),
      avaterUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.d99e9cdc1c54945672dadab879534d72?rik=PdSNDb0CwAZk1g&riu=http%3a%2f%2fcomic.sinaimg.cn%2f2011%2f0921%2fU5238P1157DT20110921163640.jpg&ehk=jB1jIDlUpHmfdu0vy4GhRF1WJ4DQ9vjn%2bL8fNST4nn4%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
      tableData: [
        {
          time: '2099-12-31',
          progress: 25,
          content: '活到老，学到老',
          color: '#95de64',
        },
        {
          time: '2022-5-20',
          progress: 100,
          content: '交个可爱的女朋友',
          color: '#69c0ff',
        },
        {
          time: '2022-12-31',
          progress: 40,
          content: '学会尤克里里',
          color: '#1890FF',
        },
        {
          time: '2022-12-31',
          progress: 40,
          content: '今年去旅游10次',
          color: '#ffc069',
        },
        {
          time: '此生无望',
          progress: 1,
          content: '成为像尤雨溪一样优秀的人',
          color: '#5cdbd3',
        },
      ],
      dynamicList: [
        {
          avater: 'https://ts1.cn.mm.bing.net/th/id/R-C.c1e1b0835c2948a577576cffa870b83c?rik=eEPRYEdEv3pawQ&riu=http%3a%2f%2ffile.qqtouxiang.com%2fqinglv%2f2020-07-07%2fc93c6acd8fff870859f2f5ff3f749324.jpeg&ehk=2Q3SfHXU2QO524EOQ2z91jiRzLH9Ygd5qDiI1DcR1p0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
          content: '9点记得开会哦,我给你们分享下我最近的开发经验',
          time: '20分钟前'
        },
        {
          avater: 'https://ts1.cn.mm.bing.net/th/id/R-C.23897a61e164a17ff9ba0302a106daca?rik=2hjv6xH6vPmLQQ&riu=http%3a%2f%2fimg2.woyaogexing.com%2f2017%2f05%2f25%2f708aea0578fe06fc!400x400_big.jpg&ehk=Lgy%2bE3ebYL3PiOao1TihmNaaZw8JFoF52sZ0s3KCha0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
          content: '我算是发现了，都是前端大佬啊😎',
          time: '40分钟前'
        },
        {
          avater: 'https://uploadfile.huiyi8.com/up/b6/b6/eb/b6b6eba1cf98977644ec5a5dca465255.jpg',
          content: 'xdm，还有一小时下班！',
          time: '一小时前'
        },
        {
          avater: 'https://pic3.zhimg.com/80/v2-3de7e35966a157de975331e34a1c5fb6_720w.jpg',
          content: '有啥好的微服务项目，推荐推荐大佬们',
          time: '一小时前'
        },
        {
          avater: 'https://img2.woyaogexing.com/2020/04/11/ed144c6ff79541d1bd932b09619bfa81!400x400.jpeg',
          content: 'JAVA太卷了，卷不动了😤',
          time: '一小时前'
        },
        {
          avater: 'https://www.yh31.com/uploadfile/ql/202104152042540827.jpg',
          content: '多么难熬的日子总会过去，不信你看看，你都在不知不觉中，熬过了很多苦难。',
          time: '两小时前'
        }
      ],
      dateNode: ''
    }
  },
  methods: {
    // 获取当前时间
    getDateNode() {
        const dateHours = new Date().getHours();
        if (dateHours >= 0 && dateHours < 6) {
            this.dateNode = "早上好"
        } else if (dateHours >= 6 && dateHours < 12) {
            this.dateNode = "上午好"
        } else if (dateHours >= 12 && dateHours < 18) {
            this.dateNode = "下午好"
        } else {
            this.dateNode = "晚上好"
        }
    }
  }
};
</script>

<style lang="less" scoped>
*{font-size: 14px;}

.el-col{
  margin-top: 10px;
}

.cardHeader{
  border-bottom: 1px solid rgb(223, 223, 223);
  padding-bottom: 15px;
  margin-bottom: 15px;
  i{
    margin-right: 5px;
  }
}

// 个人工作台
.workbench{
  display: flex;
  justify-content: space-between;
  .personInfo{
    height: 80px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
      .personText{
        margin-left: 10px;
        .textMon{
          margin-bottom: 8px;
          span{
            font-size: 20px;
          }
        }
        .textWea{
          font-size: 12px;
          color: rgb(161, 161, 161);
          .el-icon-umbrella{
            margin-right: 5px;
          }
        }
    }
  }
  .workData{
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 100px;
    .Data-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .dataTitle{
        color: gray;
        margin-bottom: 5px;
      }
      .dataContent{
        font-size: 20px;
      }
    }
  }
}

// 待办事项
.TodoList{
  height: 80px;
  border-bottom: 1px solid rgb(241, 241, 241);
  .TodoInfo{
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    span{
      line-height: 50px;
      margin-left:10px;
    }
  }
  .TodoText{
  width: 100%;
  padding-left: 5px;
  }
}

// 动态信息
.dynamicList{
  height: 80px;
  display: flex;
  align-items: center;
  border-bottom:1px solid rgb(241, 241, 241);
  .dynamicInfo{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 10px;
    .dynamicContent{
    }
    .dynamicTime{
      font-size: 10px;
      color: gray;
    }
  }
}

i{
  font-size: 20px;
  color:rgb(99, 99, 99);
}
</style>
